'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}


// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 9528,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },

  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: 'THREEJS',
    resolve: {
      alias: {
        '@': resolve('src')
      },
    },
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `static/js/[name].js`,
      chunkFilename: `static/js/[name].js`
    },
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // 为啥是images呢？可以通过审查项目 vue inspect > output.js输出到文件中，搜image就懂了
    const urlLoader = config.module.rule('images')
    // 清除已有的所有 loader,一定要进行的操作
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后
    // 具体原理可自行查看webpack官网
    urlLoader.uses.clear()
    urlLoader
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        name: './img/[name].[ext]',
        context: path.resolve(__dirname, './src'),
        publicPath: './' //采用根路径
      })

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()
  }
}
